<template>
  <div :class="`${prefixClass}`">
    <slot>
      <div v-if="mode === 'input'" :class="`${prefixClass}-input`">
        <el-input
          v-model="columnItem.modelValue.inputValue"
          @input="updateValue"
          class="w-50 m-2"
          placeholder="请输入"
          :disabled="columnItem.modelValue.isBlank || columnItem.modelValue.notBlank"
          :prefix-icon="Search"
        />
        <el-checkbox :class="`${prefixClass}-input__check1`" v-model="columnItem.modelValue.isBlank">空</el-checkbox>
        <el-checkbox
          v-if="mode === 'input' || showNull"
          :class="`${prefixClass}-input__check2`"
          v-model="columnItem.modelValue.notBlank"
          >非空</el-checkbox
        >
      </div>
      <FISelect
        v-if="mode === 'select'"
        class="select-class"
        v-model="columnItem.modelValue"
        @input="updateValue"
        :teleported="false"
        :options="columnItem.options"
        v-bind="{ ...columnItem.selectBinds, ...$attrs }"
      >
      </FISelect>
      <!-- <OyAmountRange :initial-min-value="null" :initial-max-value="null" v-model="columnItem.modelValue" /> -->
      <OyInputNumberRange
        v-if="mode === 'number-range'"
        class="number-range__class"
        :value="columnItem.modelValue"
        v-model="columnItem.modelValue"
        @inputfrom="handleInputFrom"
        @inputto="handleInputTo"
        @input="updateValue"
        v-bind="{ ...selectBinds, ...$attrs }"
      />
      <FIDatePicker
        v-if="mode === 'date-picker'"
        style="width: 100%"
        :teleported="false"
        type="daterange"
        v-model="columnItem.modelValue"
        @input="updateValue"
        placeholder="请选择"
        v-bind="{ ...selectBinds, ...$attrs }"
      />
      <el-time-picker
        v-if="mode === 'time-picker'"
        :teleported="false"
        style="width: 100%"
        v-model="columnItem.modelValue"
        @input="updateValue"
        is-range
        range-separator="~"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        v-bind="{ ...timePickerBinds, ...$attrs }"
      />
    </slot>
  </div>
</template>
<script setup lang="ts">
import { ref, defineEmits, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'
import OyInputNumberRange from './OyInputNumberRange.vue'
// import OyAmountRange from './OyAmountRange.vue'

import FISelect from '@/components/FISelect/index.vue'
const prefixClass = 'oy-filter-cell'
interface configInterface {
  ops: string // like->input, in->selectt, between->范围, equal->等于
  valueLike?: string
  valueIn?: [string, Array<string>]
  valueNull?: string
  valueBetweenMin?: string
  valueBetweenMax?: string
  valueEqual?: string
  isBlank?: boolean // 空
  notBlank?: boolean // 非空
}
const props = defineProps({
  columnItem: {
    type: Object,
    default: () => {
      return {}
    },
  },
  modelValue: {
    type: [String, Array, Object],
  },
  // mode: {
  //   type: String,
  //   default: 'input',
  // },
  // 当select时需要传递
  options: {
    type: Array,
    default: () => {
      return []
    },
  },
  // select其他配置参数
  selectBinds: {
    type: Object,
    default: () => {
      return {}
    },
  },
  timePickerBinds: {
    type: Object,
    default: () => {
      return {}
    },
  },
  showNull: {
    type: Boolean,
    default: false,
  },
  showFull: {
    type: Boolean,
    default: false,
  },
})
const filterValueSate = ref<configInterface>({
  ops: 'like',
  valueLike: '',
  valueIn: [],
  valueNull: '',
  valueBetweenMin: '',
  valueBetweenMax: '',
  valueEqual: '',
  isBlank: false,
  notBlank: false,
})
const emit = defineEmits(['filter-reset', 'column-filter-confirm', 'update:columnItem', 'update:modelValue'])
// 筛选类型 input select number-range date-picker
const mode = computed(() => {
  let tempMode = props.columnItem?.filterMode ? props.columnItem?.filterMode : props.columnItem?.editType
  updateFilterOps(tempMode)
  return tempMode
})
// 筛选类型
const updateFilterOps = (mode) => {
  switch (mode) {
    case 'select':
      filterValueSate.value.ops = 'in'
      break
    case 'number-range':
    case 'date-picker':
    case 'time-picker':
      filterValueSate.value.ops = 'between'
      break
    default:
      filterValueSate.value.ops = 'like'
      break
  }
}
const filterValue = ref(props.modelValue)
const updateValue = (event) => {
  // emit('update:modelValue', event)
  emit('update:columnItem', { ...props.columnItem, modelValue: event })
}
const updateModelValue = (event) => {
  emit('update:modelValue', event)
}
// const filterValue = computed(() => {
//   return props.modelValue
// })
// return checkedList.length !== cloneColumnList.value.length && checkedList.length > 0
const reSet = () => {
  filterValueSate.value.valueLike = ''
  filterValueSate.value.valueIn = []
  filterValueSate.value.valueBetweenMin = ''
  filterValueSate.value.valueBetweenMax = ''
  filterValueSate.value.valueEqual = ''
  filterValueSate.value.isBlank = false
  filterValueSate.value.notBlank = false
  emit('filter-reset', filterValueSate.value)
}
const handleInputFrom = (e) => {
  filterValueSate.value.valueBetweenMin = e
}
const handleInputTo = (e) => {
  filterValueSate.value.valueBetweenMax = e
}
const filterConfirm = () => {
  emit('column-filter-confirm', { columnItem: props.columnItem, filterObj: filterValueSate.value })
}
</script>
<style lang="less" scoped>
@prefix-cls: ~'oy-filter-cell';
.@{prefix-cls} {
  width: 100%;
  &-input {
    display: flex;
    align-items: center;
    &__check1 {
      margin: 0 5px !important;
    }
    // &__check2 {
    //     margin-right: 10px !important;
    // }
    ::v-deep(.el-input .el-input__wrapper) {
      width: 130px !important;
    }
    ::v-deep(.el-checkbox__label) {
      padding-left: 3px;
    }
  }
}

.select-class {
  width: 220px !important;
  max-width: 220px;
}
.number-range__class {
  ::v-deep(.el-input .el-input__wrapper) {
    width: 104px;
    max-width: 104px;
  }
}
</style>
